<template>
	<!--pages/listxq/listxq.wxml-->
	<!-- <van-dialog id="van-dialog" />
	<van-dialog id="van-toast" /> -->
	<view class="detail-container">

		<!-- 商品图片轮播 -->
		<swiper class="goods-swiper" indicator-dots="true" autoplay="true" interval="3000">
			<swiper-item v-for="item in imgs">
				<image :src="item" mode="aspectFill"></image>
			</swiper-item>
		</swiper>

		<!-- 商品基本信息 -->
		<view class="goods-info">
			<text class="goods-title">{{arr1.proname}}</text>
			<view class="price-container">
				<text class="current-price">¥{{arr1.originprice}}</text>
				<text class="original-price">¥{{arr1.sales}}</text>
			</view>
			<view class="sales-container">
				<text>已售 {{arr1.stock}} 件</text>
			</view>
		</view>



		<!-- 商品详情内容 -->
		<view class="detail-content">
			<text class="detail-desc">
				{{arr1.desc}}
			</text>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<view class="cart-btn" @click="buyNow">
				<image src="/images/cart.png" mode="aspectFit"></image>
				<text @click="car">购物车</text>
			</view>
			<view class="buy-btn" @click="addToCart(arr1.proid)">加入购物车</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		ref
	} from 'vue';
	let arr3 = ref([]);
	let arr2 = ref([]);
	let arr1 = ref([]);
	let imgs = ref([])
	onLoad((option) => {
		console.log(option)
		listxq(option.proid);
	})
	const listxq = (id) => {
		uni.request({
			url: "https://www.xuzhixiang.top:30001/api/pro/detail/" + id,
			method: "GET",
			success: (res) => {
				arr1.value = res.data.data
				imgs.value = res.data.data.imgs
				console.log(res.data)
			}
		})
	}

	function buyNow() {
		uni.switchTab({
			url: "/pages/cart/cart"
		})
	}
	let token = uni.getStorageSync('token')
	let userid = uni.getStorageSync("userid")

	function addToCart(proid) {
		console.log(proid)

		uni.getStorage({
			key: "token",
			success: (res) => {
				uni.request({
					url: "https://www.xuzhixiang.top:30001/api/cart/add",
					method: "POST",
					header: {
						token: token
					},
					data: {
						userid,
						proid,
						num: 1
					}
				})
			},
			fail: () => {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			}
		})
	}

	function car() {
		uni.getStorage({
			key: "token",
			success: (res) => {
				uni.switchTab({
					url: "/pages/cart/cart"
				})
			},
			fail: () => {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			}
		})
	}
</script>

<style>
	/* pages/listxq/listxq.wxss */
	.detail-container {
		position: relative;
		width: 100%;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;
	}

	/* 返回按钮 */
	.back-btn {
		position: absolute;
		top: 20rpx;
		left: 20rpx;
		width: 60rpx;
		height: 60rpx;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 100;
	}

	.back-btn image {
		width: 30rpx;
		height: 30rpx;
	}

	/* 商品图片轮播 */
	.goods-swiper {
		width: 100%;
		height: 500rpx;
	}

	.goods-swiper image {
		width: 100%;
		height: 100%;
	}

	/* 商品基本信息 */
	.goods-info {
		padding: 20rpx;
		background-color: white;
		margin-bottom: 20rpx;
	}

	.goods-title {
		font-size: 32rpx;
		color: #333;
		line-height: 1.5;
		margin-bottom: 15rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.price-container {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.current-price {
		font-size: 40rpx;
		color: #e64340;
		font-weight: bold;
		margin-right: 10rpx;
	}

	.original-price {
		font-size: 24rpx;
		color: #999;
		text-decoration: line-through;
		margin-right: 10rpx;
	}

	.discount {
		font-size: 24rpx;
		color: #ff6b6b;
		background-color: #fff2f2;
		padding: 2rpx 10rpx;
		border-radius: 15rpx;
	}

	.sales-container {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #999;
	}

	.separator {
		margin: 0 10rpx;
	}



	/* 商品详情内容 */
	.detail-content {
		background-color: white;
		padding: 20rpx;
		flex: 1;
	}

	.detail-content image {
		width: 100%;
		margin-bottom: 20rpx;
	}

	.detail-desc {
		font-size: 28rpx;
		color: #333;
		line-height: 1.6;
	}

	/* 底部操作栏 */
	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		display: flex;
		background-color: white;
		border-top: 1rpx solid #eee;
		padding: 15rpx;
		box-sizing: border-box;
	}

	.cart-btn {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.cart-btn image {
		width: 50rpx;
		height: 50rpx;
		margin-bottom: 5rpx;
	}

	.cart-btn text {
		font-size: 24rpx;
		color: #333;
	}

	.buy-btn {
		flex: 2;
		background-color: #e64340;
		color: white;
		border-radius: 50rpx;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 20rpx;
	}
</style>